<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Quick Start - Layui</title>
    <link href="layui/css/layui.css" rel="stylesheet">
</head>

<body>
    <!-- HTML Content -->
    <!-- 下拉菜单按钮 -->
    <input type='button' class='layui-btn rowmoreBtn layui-icon layui-icon-more' value="更多" />
    <button class="layui-btn" id="myDropdown">下拉菜单</button>


</body>
<!-- 引入 LayUI JS -->
<script src="layui/layui.js"></script>
<script>
    //使用说明 LayUI.dropMenu下拉菜单组件
    layui.config({
        base: './lib/', //拓展模块的根目录
    })
        .extend({
            dropMenu: '/dropMenu/dropMenu'
        });



    //预加载 dropMenu 模块，不能在外部直接用layui.dropMenu
    layui.use(['dropMenu'], function () {
        layui.dropMenu.render({
            type: 0, // 默认0，单击和鼠标经过时都生效，1点击时，2鼠标经过时（非必填）
            elem: '.rowmoreBtn', // 绑定到的元素选择器
            width: '120px', // 菜单宽度
            css: { 'background': 'red' }, // 菜单样式
            location: 'c', // 下拉菜单依靠位置，c居中、l左、r右（非必填）
            align: 'c', // 菜单内容文本对齐方式，c居中、l左、r右（非必填）
            data: [
                { title: '选项1', icon: 'layui-icon-set', event: 'more1', isShow: true },
                { title: '选项2', icon: 'layui-icon-notice', event: 'more2', isShow: true },
                { title: '选项3', icon: 'layui-icon-search', event: 'more3', isShow: false }, // 不显示此项
                { title: '选项4', icon: 'layui-icon-friends', event: 'more4', isShow: true }
            ],
            event: {
                more1: function () {
                    alert('触发了事件1');
                },
                more2: function () {
                    alert('触发了事件2');
                },
                more3: function () {
                    alert('触发了事件3');
                },
                more4: function () {
                    alert('触发了事件4');
                }
            },
            done: function (dropM) {
                // 渲染完成后触发的回调，dropM是dropMenu对象
                // 可以在这里动态处理 `isShow`，比如隐藏不显示的菜单项
                dropM.elem.find('li').each(function () {
                    var isShow = $(this).data('isshow');
                    if (isShow === false) {
                        $(this).hide(); // 隐藏不显示的菜单项
                    }
                });
            }
        });

        // var dropMenu = layui.dropMenu;

        layui.dropMenu.render({
            elem: '#myDropdown', // 绑定元素
            data: [
                { title: '选项 1', id: 1 },
                { title: '选项 2', id: 2 },
                { title: '选项 3', id: 3 }
            ],
            click: function (obj) {
                console.log('点击了:', obj);
            }
        });

    });
</script>

</html>